<template>
  <div class="yj-details-modal-container" id="yj-details-modal-container">
    <a-modal
      :visible.sync="visible"
      title="压浆明细"
      width="1280px"
      wrapClassName="detail-modal-warp"
      :footer="null"
      @cancel="handleClick()"
    >
      <div class="detail-modal-body" v-loading="loading">
        <div class="table-contaier">
          <vxe-table
            align="center"
            border
            :data="dataSource"
            show-overflow
            show-header-overflow
            show-footer-overflow
            show-footer
            :column-config="{ resizable: true }"
            class="scrollbarStyle"
            height="580px"
            :sort-config="{ trigger: 'cell' }"
            ref="xTable"
            :scroll-x="{ gt: 10 }"
            :scroll-y="{ gt: 100 }"
            row-id="id"
            :checkbox-config="{
              reserve: true,
            }"
          >
            <vxe-column type="seq" width="100" title="序号"></vxe-column>
            <vxe-column
              :title="item.title"
              :field="item.key"
              :key="index"
              :min-width="item.width"
              show-overflow
              v-for="(item, index) in table.columns"
            >
              <template #default="{ row }">
                <div
                  v-if="item.key == 'result'"
                  class="result-td"
                  :class="row[item.key] == '0' ? 'ok' : 'error'"
                >
                  {{ row[item.key] == "0" ? "合格" : "不合格" }}
                </div>
                <div v-else>{{ row[item.key] }}</div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
// 压浆明细【弹窗】
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    dataSource: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        } else {
          this.table.source = [];
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      table: {
        source: [],
        columns: [
          {
            title: "孔号",
            dataIndex: "steelBeamNo",
            key: "steelBeamNo",
            width: "120px",
          },
          {
            title: "压浆方向",
            dataIndex: "pulpingOrientation",
            key: "pulpingOrientation",
            width: "180px",
          },
          {
            title: "压浆顺序",
            dataIndex: "pulpingOrder",
            key: "pulpingOrder",
            width: "500px",
          },
          {
            title: "配合比(水泥:添加剂:水)",
            dataIndex: "mixProportion",
            key: "mixProportion",
            width: "200px",
          },
          {
            title: "水胶比",
            dataIndex: "waterRatio",
            key: "waterRatio",
            width: "120px",
          },
          {
            title: "开始时间",
            dataIndex: "startDate",
            key: "startDate",
            width: "180px",
          },
          {
            title: "结束时间",
            dataIndex: "endDate",
            key: "endDate",
            width: "180px",
          },
          {
            title: "进浆压力(MPa)",
            dataIndex: "pulpingPressureIn",
            key: "pulpingPressureIn",
            width: "120px",
          },
          {
            title: "出浆压力(MPa)",
            dataIndex: "pulpingPressureOut",
            key: "pulpingPressureOut",
            width: "120px",
          },
          {
            title: "持压时间",
            dataIndex: "holdingTime",
            key: "holdingTime",
            width: "120px",
          },
          {
            title: "进浆量(L)",
            dataIndex: "pulpingVolume",
            key: "pulpingVolume",
            width: "120px",
          },
          {
            title: "理论浆量(L)",
            dataIndex: "pulpingVolume",
            key: "pulpingVolume",
            width: "120px",
          },
          {
            title: "状态",
            dataIndex: "result",
            key: "result",
            width: "120px",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    getContainer() {
      return document.getElementById("yj-details-modal-container");
    },

    //关闭
    handleClick() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.yj-details-modal-container {
  /deep/.ant-modal-body {
    padding: 0;
  }
  .detail-modal-body {
    height: 620px;
    overflow: hidden;
    .flex();
    flex-direction: column;
    .table-contaier {
      flex: 1;
      padding: 20px;
      overflow: hidden;
      tr {
        .multiline-item {
          margin: 2px 0;
        }
        .result-td {
          &.ok {
            color: #4bc964;
          }
          &.error {
            color: #ff3f4a;
          }
        }
      }
    }
    .pager-contaier {
      flex-shrink: 0;
      height: 80px;
      .flex();
      align-items: center;
      padding: 0 20px;
      justify-content: flex-end;
      /deep/.vxe-pager {
        padding-right: 0;
      }
    }
  }
}
</style>
